#swap-page {
    .swap-container {
        .swap-list {
            padding: 0 25px;
            margin-bottom: 40px;
            .swap-num {
                background: url('@/assets/images/index/num-bgc.png') no-repeat center;
                background-size: 100% 100%;
                margin-bottom: 25px;
                padding: 15px 25px 20px;
                img {
                    width: 75px;
                    margin: auto;
                }
                .swap-num-item {
                    margin-top: 20px;
                    text-align: center;
                    .name {
                        font-size: 9px;
                        color: #000000;
                        margin-bottom: 10px;
                        font-weight: Medium;
                    }
                    .num {
                        font-size: 8px;
                        color: #666666;
                        font-weight: Regular;
                    }
                }
            }
            .swap-content {
                .swap-content-left {
                    .swap-content-title {
                        font-size: 12px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: center;
                        color: #000000;
                        line-height: 12px;
                        margin-bottom: 25px;
                    }
                    .title-desc {
                        font-size: 10px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #666666;
                        line-height: 15px;
                        margin-bottom: 15px;
                    }
                    .swap-content-table {
                        width: 100%;
                        margin-bottom: 25px;
                        .row {
                            font-size: 7px;
                            &.head {
                                height: 28px;
                                line-height: 28px;
                                background: #f6f5f9;
                                border: none;
                                font-family: PingFang SC, PingFang SC-Regular;
                                font-weight: Regular;
                                text-align: left;
                                color: #000000;

                            }
                            &.td-content {
                                background-color: #fff;
                                color: #7f7e83;
                                height: 32px;
                                line-height: 32px;
                            }
                            .cell {
                                border-bottom: 1px solid #eceaf3;
                                &.first {
                                    padding-left: 12px;
                                }
                            }
                        }
                    }
                    .swap-gold-reserve {
                        padding: 11px 10px 11px 0;
                        background: #ffffff;
                        border: 1px solid #eceaf3;
                        font-size: 7px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        color: #333333;
                        justify-content: space-around;
                        margin-bottom: 40px;
                    }
                }
                .swap-content-right {
                    background: #ffffff;
                    border-top: none;
                    .right-tab {
                        height: 30px;
                        margin-bottom: 25px;
                        display: grid;
                        grid-template-columns: repeat(2, 156px);
                        background-color: #F6F4FF;
                        padding: 5px;
                        user-select: none;
                        .active {
                            color: #3754F1;
                            background-color: #fff;
                            transition: all .3s;
                        }
                    }
                    .right-content {
                        margin-bottom: 25px;
                        .right-content-shi,
                        .right-content-shui {
                            flex: 1;
                            flex-shrink: 0;
                            .ratio-shui {
                                background: #f7f9ff;
                                padding: 6px 0;
                                text-align: center;
                                font-size: 12px;
                                font-family: PingFang SC, PingFang SC-Regular;
                                font-weight: Regular;
                                text-align: center;
                                color: #000000;
                                span {
                                    color: #3754f1;
                                    margin-right: 4px;
                                }
                            }
                        }
                        .img-box {
                            padding: 27px 34px;
                            background: #f7f9ff;
                            margin-bottom: 10px;
                            img {
                                width: 54px;
                            }
                        }
                        .sui-input {
                            border: 0.5px solid rgba(55,84,241,0.20);
                            padding: 0 10px;
                            font-size: 12px;
                            color: #999999;
                            .adm-input-element {
                                font-size: 12px;
                                color: #000000;
                                padding-right: 6px;
                            }
                        }
                        .right-content-ratio {
                            width: 80px;
                            flex-shrink: 0;
                            padding-top: 20px;
                            text-align: center;
                            font-size: 10px;
                            font-family: PingFang SC, PingFang SC-Medium;
                            font-weight: Medium;
                            color: #999999;
                            img {
                                width: 30px;
                                margin: auto;
                            }
                            .ratio {
                                margin: 10px 0;
                            }
                        }
                    }
                    .ratio-desc {
                        // padding: 0 50px;
                        font-size: 12px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: center;
                        color: #000000;
                        margin-bottom: 25px;
                    }
                    .ratio-submit {
                        .btn {
                            background-color: #3754F1;
                            font-size: 12px;
                            font-family: PingFang SC, PingFang SC-Semibold;
                            font-weight: Semibold;
                            text-align: center;
                            color: #ffffff;
                            line-height: 12px;
                            padding: 14px 0;
                            user-select: none;
                        }
                    }
                }
            }
        }
    }
}